<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>:hover</title>
		<style>
			.box {
				display: block;
				position: relative;
				cursor: pointer;
			}

			.box:hover .tip {
				/* display: block; */
				visibility: visible;
				transition: visibility 0s .5s; 
			}
			
			.box:hover + .tip {
				visibility: visible;
				z-index: 1;
			}
			.box:focus + .tip {
				visibility: visible;
				z-index: 1;
			}

			.tip {
				display: block;
				position: absolute;
				/* display: none; */
				visibility: hidden;
				transition: visibility 0s 0s; 
				background-color: #000000;
				color: #FFFFFF;
			}
		</style>
	</head>
	<body>
		<h2>hover延时防止用户误触</h2>
		<div>
			<div class="box">hover我挡住楼下
				<span class="tip">我挡住你啦哈哈哈</span>
			</div>
			<div>
				<button>我是被挡住的那个</button>
			</div>
		</div>
		<hr />
		<h2>做下拉列表，除了用父子，还可以兄弟选择器"+"</h2>
		<h4>大型项目中，下拉列表必须点击也能触发，防止用户没有鼠标用键盘操作。(:focus)</h4>
		<h4>你可以用键盘，试试兄弟选择器写的那个</h4>
		<a href="" class="box">我把你兄弟
		</a>
		<span class="tip">我只是个弟弟啊</span>
		<a href="" class="box">你却把我当爸爸
			<span class="tip">我只是个儿子啊</span>
		<a>
	</body>
</html>
